/*
 * @Author: 吴世扬 18368095041@163.com
 * @Date: 2024-08-29 17:59:47
 * @LastEditors: 吴世扬 18368095041@163.com
 * @LastEditTime: 2024-10-15 08:19:53
 * @FilePath: /react18-vite-admin/src/App.tsx
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 */
import { ConfigProvider } from 'antd';
import { RouterProvider } from 'react-router-dom';

import { useMessage } from '@/service/app/useMessage';
import { useModal } from '@/service/app/useModal';
import { usePermissionStore, useSettingsStore, useAppStore } from '@/store';

const App = () => {
    const { size } = useAppStore((state) => state);
    const { cssVarObject } = useSettingsStore((state) => state);
    const { contextHolder: messageContextHolder } = useMessage();
    const { contextHolder: modalContextHolder } = useModal();

    const { reactRouter } = usePermissionStore((state) => state);

    return (
        <div id="app-container" className="wh-full" style={cssVarObject}>
            <ConfigProvider
                componentSize={size}
                theme={{
                    token: {
                        colorPrimary: cssVarObject['--c-primary'],
                        colorBgContainer: cssVarObject['--bg-front'],
                        colorTextPlaceholder: cssVarObject['--c-disabled'],
                        colorText: cssVarObject['--c-text1']
                    },
                    components: {
                        Input: {
                            activeBorderColor: cssVarObject['--c-primary']
                        }
                    }
                }}
            >
                {messageContextHolder}
                {modalContextHolder}
                {reactRouter ? <RouterProvider router={reactRouter} /> : <></>}
            </ConfigProvider>
        </div>
    );
};

export default App;
